import { Component } from '@angular/core';
import { FieldType } from '@ngx-formly/core';
import { ExpressionService } from '@core/services/expression/ExpressionService';
import { Events } from '@core/services/events/Events';
import { SubjectService } from '@core/services/events/subject.service';
import { ApiService } from '@core/services/http/api.service';
import { ApesField } from '@shared/ui-zorro/src/types/apes-field';
import { getO } from '../../../../utils/utils';

@Component({
  selector: 'formly-field-important-note',
  template: `
    <textarea *ngIf="Type == 'textarea'" apes-input
              class="{{prefixCls}}-input-readonly"
              [rows]="Rows"
              [cols]="to.cols"
              [ngStyle]="style"
              [value]="Value" readonly="readonly"></textarea>
    <div *ngIf="Type != 'textarea'" class="{{prefixCls}}-important-note" [ngStyle]="style">
      <div [innerHTML]="ConValue"></div>
    </div>
  `,
})
export class FormlyFieldImportantNote extends ApesField {

  prefixCls = 'apes';

  styleColor = { 'color': '#f5222d' };

  constructor(protected apiService: ApiService, protected events: Events, protected expressionService: ExpressionService, protected subject: SubjectService) {
    super(apiService, events, expressionService, subject);
  }

  get Type() {
    let type = 'textarea';
    if (this.to.hasOwnProperty('type')) {
      type = this.to.type;
    }
    return type;
  }

  get Rows() {
    return this.to.rows || 1;
  }

  get Value() {
    return this.to.value || '请填写重要提示';
  }

  get style() {
    return this.to.style ? getO(this.to.style) : this.styleColor;
  }

  get ConValue() {
    if (this.to.hasOwnProperty('valueFormatter')) {
      let expression = this.to.valueFormatter;
      return this.expressionService.evaluate(expression, {
        context: this.formState,
        model: this.formState.model,
        value: this.to.value,
      });
    } else {
      let text = `${this.to.value}`;
      return text;
    }

  }
}
